
import { ICapability } from "@/components/capability";
import { useVisible } from "@/tools/hooks";
import { Button, Drawer, Space } from "antd";
import React from "react";
import { v4 as uuidv4 } from 'uuid';
import { MenuController } from "@/controllers/MenuController";


/** 菜单层次 */
export function useLevelMenu(record): ICapability {

    const { open, onClose, onOpen } = useVisible()

    const controller = React.useContext(MenuController.Context);

    const onSetLevel = React.useCallback(async level => {
        controller.run(async s => {
            setLevel([record])
            function setLevel(rs: any[] = []) {
                rs.forEach(r => {
                    s.menu.filter(m => m.menuId === r.menuId).forEach(m => m.level = level)
                    setLevel(r.children)
                })
            }
            s.menu = [...s.menu]
        })
        onClose()
    }, [controller, onClose, record])

    const element = React.useMemo(() => {
        return (
            <Drawer
                title="层次"
                onClose={onClose}
                open={open}
            >
                <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                    <Button block onClick={() => { onSetLevel(0) }} >层级0</Button>
                    <Button block onClick={() => { onSetLevel(1) }} >层级1</Button>
                    <Button block onClick={() => { onSetLevel(2) }} >层级2</Button>
                    <Button block onClick={() => { onSetLevel(3) }} >层级3</Button>
                </Space>
            </Drawer>
        )
    }, [onClose, onSetLevel, open])

    const onStart = onOpen;

    return {
        id: uuidv4(),
        title: '层级',
        onStart,
        element,
    }
}